/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  Dimensions,
  ScrollView
} from 'react-native';
console.disableYellowBox = true

import { ColorWheel } from 'react-native-color-wheel';
import Slider from "react-native-slider";
var tinycolor = require("tinycolor2");

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

import Smartconfig from 'react-native-smartconfig';

type Props = {};
export default class App extends Component<Props> {

  constructor(props){
    super(props)
    this.state = {
      ssid: '',
      password: '',
      animating: false,
      rgbJson: ''
    }
  }




  search(){

    if(this.state.ssid && this.state.password){
      //this.setState({animating:true})
      Smartconfig.start({
        type: 'esptouch', //or airkiss, now doesn't not effect
        ssid: this.state.ssid,
        bssid: '', //"" if not need to filter (don't use null)
        password: this.state.password,
        timeout: 50000 //now doesn't not effect
      }).then(function(results){
        //Array of device success do smartconfig
        console.log(results);

        alert('设备已经连接成功');
        //this.setState({animating:false})

      }).catch(function(error) {
        //this.setState({animating:false})
        console.log(error);
      });
    }else{
      alert('请填写wifi账号密码')
    }




  }

  render() {
    return (
      <View style={styles.container}>


        <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
          <Text style={{fontSize:25, marginBottom:10}}>钜豪-智能调光</Text>

          <View style={{flexDirection:'row', height:60, width:500, justifyContent:'center', alignItems:'center'}}>
            <Text style={{fontSize:18, marginRight:20}}>wifi账号：</Text>
            <TextInput
              style={{height: 60, fontSize:18, width:200}}
              placeholder="wifi账号"
              onChangeText={(text) => this.setState({ssid: text})}
            />
          </View>

          <View style={{flexDirection:'row', height:60, width:500, justifyContent:'center', alignItems:'center'}}>
            <Text style={{fontSize:18, marginRight:20}}>wifi密码：</Text>
            <TextInput
              style={{height: 60, fontSize:18, width:200}}
              placeholder="密码"
              onChangeText={(text) => this.setState({password: text})}
            />
          </View>


          <TouchableOpacity onPress={()=>{this.search()}} style={{marginTop:20, marginBottom:80}} disabled={this.state.animating}>
            <Text style={{fontSize:18}}>开始搜索</Text>
          </TouchableOpacity>

          <Text>亮度设置</Text>
          <View style={{ marginLeft: 10, marginRight: 10, alignItems: "stretch", justifyContent: "center", width:300}}>
            <Slider
              value={1023}
              onSlidingComplete={(val)=>{
                let value = parseInt(val)

                let colorObj = {
                  red: 0,
                  green: value,
                  blue:  0,
                }
                console.log(JSON.stringify(colorObj))

                return fetch('https://tao.vyxjj.com/api/aliyun/public?rgb='+JSON.stringify(colorObj))
                  .then((response) => response.json())
                  .then((responseJson) => {
                    console.log(responseJson)
                  })
                  .catch((error) => {
                    console.error(error);
                  });
              }}
              minimumValue={0}
              maximumValue={1023}
            />
          </View>
        </View>



        {/*<ColorWheel*/}
          {/*initialColor="#ee0000"*/}
          {/*onColorChange={(color) => {*/}
            {/*if (color.h < 0) {*/}
              {/*color.h = Number(color.h) + 360;*/}
            {/*}*/}
            {/*let colors = tinycolor({ h: color.h, s: color.s, v: color.v });*/}
            {/*colors = colors.toRgb();*/}
            {/*console.log(colors);*/}
            {/*let colorObj = {*/}
              // red: 1023 - (colors.r * 4),
              // green: 1023 - (colors.g * 4),
              // blue:  1023 - (colors.b * 4),
            {/*}*/}

            {/*console.log(JSON.stringify(colorObj));*/}

            {/*//this.setState({rgbJson: JSON.stringify(colorObj)})*/}


            {/*return fetch('https://tao.vyxjj.com/api/aliyun/public?rgb='+JSON.stringify(colorObj))*/}
              {/*.then((response) => response.json())*/}
              {/*.then((responseJson) => {*/}
                {/*console.log(responseJson)*/}
              {/*})*/}
              {/*.catch((error) => {*/}
                {/*console.error(error);*/}
              {/*});*/}

          {/*}}*/}
          {/*style={{width: Dimensions.get('window').width}}*/}
          {/*thumbStyle={{ height: 30, width: 30, borderRadius: 30}} />*/}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop:10,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
});
